/** @format */

import ErrorFilterForm from '@/components/filters/ErrorFilterForm'
import { ErrorType, IErrorEvent } from '@/types/collection/error'
import { createFileRoute } from '@tanstack/react-router'
import { Button, Table, TableProps } from 'antd'

export const Route = createFileRoute('/error')({
  component: RouteComponent,
})

function RouteComponent() {
  const columns: TableProps<IErrorEvent>['columns'] = [
    {
      title: '事件ID',
      dataIndex: 'eventId',
      key: 'eventId',
      align: 'center',
    },
    {
      title: '事件类型',
      dataIndex: 'eventType',
      key: 'eventType',
      align: 'center',
    },
    {
      title: '错误信息',
      dataIndex: 'errMessage',
      key: 'errMessage',
      align: 'center',
    },
    {
      title: '错误行号',
      dataIndex: 'line',
      key: 'line',
      align: 'center',
    },
    {
      title: '错误列号',
      dataIndex: 'col',
      key: 'col',
      align: 'center',
    },
    {
      title: '错误发生时间',
      dataIndex: 'sendTime',
      key: 'sendTime',
      align: 'center',
    },
    {
      title: '错误触发时间',
      dataIndex: 'triggerTime',
      key: 'triggerTime',
      align: 'center',
    },
    {
      title: '错误发生页面',
      dataIndex: 'triggerPageUrl',
      key: 'triggerPageUrl',
      align: 'center',
    },

    {
      title: '错误堆栈信息',
      dataIndex: 'errStack',
      key: 'errStack',
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (row: IErrorEvent) => {
        return (
          <Button type="link" onClick={() => detail(row)}>
            查看
          </Button>
        )
      },
    },
  ]

  function detail(row: IErrorEvent) {
    console.log(row.id)
  }
  function fitlerSubmit(values: IErrorEvent) {
    console.log(values)
  }
  return (
    <div>
      <ErrorFilterForm onSubmit={fitlerSubmit} />
      <Table dataSource={dataSource} columns={columns} rowKey={(record: IErrorEvent) => record.id} />
    </div>
  )
}

const dataSource: IErrorEvent[] = [
  {
    id: 1,
    eventId: 'code',
    eventType: ErrorType.Error,
    errMessage: 'a.split is not a function',
    line: '288',
    col: '9',
    sendTime: 1689728522923,
    triggerTime: 1689728522923,
    triggerPageUrl: 'http://localhost:6656/#/err',
    recordscreen: 'H4sIAAAAAAAAA+R9V3vqyNLuD9oXh2C8h0sbm7RA3saYoDuChyQwswATfv2p6', // 错误录屏数据
    errStack: '',
  },
  {
    id: 2,
    eventId: 'code',
    eventType: ErrorType.Error,
    errMessage: 'a.split is not a function',
    line: '288',
    col: '9',
    sendTime: 1689728522923,
    triggerTime: 1689728522923,
    triggerPageUrl: 'http://localhost:6656/#/err',
    recordscreen: 'H4sIAAAAAAAAA+R9V3vqyNLuD9oXh2C8h0sbm7RA3saYoDuChyQwswATfv2p6', // 错误录屏数据
    errStack: '',
  },
  {
    id: 3,
    eventId: 'code',
    eventType: ErrorType.Error,
    errMessage: 'a.split is not a function',
    line: '288',
    col: '9',
    sendTime: 1689728522923,
    triggerTime: 1689728522923,
    triggerPageUrl: 'http://localhost:6656/#/err',
    recordscreen: 'H4sIAAAAAAAAA+R9V3vqyNLuD9oXh2C8h0sbm7RA3saYoDuChyQwswATfv2p6', // 错误录屏数据
    errStack: '',
  },
]
